<template>
  <div class="margin-b150 news">
    <!-- 标题 -->
    <div class="text-33 padding-lr20 rem-36px bg-ff padding-t40 text-content">
      <b>{{data.article_title}}</b>
    </div>
    <!-- 小标题 -->
    <div
      class="flex padding-lr20 bg-ff padding-tb20"
      ref="title"
      @click="to('/card/',data.enterprise_id)"
    >
      <div class="cover_img margin-r24">
        <img class="wh-100p" :src="data.enterprise_logo ? data.enterprise_logo : $nodata" alt />
      </div>
      <div class="flex flex-column justify-around">
        <div class="text-33 rem-30px text-cut-one">{{data.enterprise_title}}</div>
        <div class="c-99 rem-24px">{{data.created_at}}</div>
      </div>
    </div>
    <!-- 上滑后标题 -->
    <div
      v-show="navType"
      @click="to('/card/',data.enterprise_id)"
      class="downnav flex align-center justify-between padding-20 bg-ff"
    >
      <van-icon name="arrow-left" @click="$router.go(-1)" />
      <div class="cover_img margin-lr24">
        <img class="wh-100p" :src="data.enterprise_logo ? data.enterprise_logo : $nodata" alt />
      </div>
      <div class="flex-grow">{{data.enterprise_title}}</div>
    </div>
    <!-- 内容 -->
    <div class="padding-t20 margin-b20 bg-ff text-content padding-lr20">
      <div class="news_cont">
        <!-- <img src="@/assets/img/news.png" alt /> -->
        <div v-html="data.content">{{data.content}}</div>
      </div>
      <!-- 内容按钮 -->
      <div class="flex justify-between padding-tb40 margin-lr50">
        <div class="border">
          <i class="iconfont icon-bianzu"></i>
          <span>浏览量：{{data.browse_num>9999?'9999+':data.browse_num}}</span>
        </div>
        <div class="border" @click="setStar">
          <i :class="['iconfont','icon-awesome',data.is_star==1?'red':'']"></i>
          <span>点赞：{{data.support_num>9999?'9999+':data.support_num}}</span>
        </div>
      </div>
    </div>

    <!-- 相关新闻 -->
    <div class="bg-ff">
      <div class="hot_title bg-ff padding-lr20">
        <span class="c-ff0">相关新闻</span>
        <span>&nbsp;•&nbsp;</span>
        <span class="text-66">RELATE NEWS</span>
      </div>
      <div
        v-for="(item, index) in article"
        :key="index"
        @click="to('/recruit/news',item.article_id)"
      >
        <div class="padding-20 news_li flex" v-if="item.article_id != article_id">
          <img class="margin-r24" v-if="item.thumb" :src="item.thumb" alt />
          <img class="margin-r24" v-if="!item.thumb" src="@/assets/img/nodata.png" alt />
          <div class="flex-grow">
            <div class="rem-32px text-cut-two text-content">{{item.article_title}}</div>
            <div class="flex justify-between news_li_s">
              <div
                class="rem-20px c-66 news_li_tip flex-two text-cut-one margin-r20"
              >{{item.enterprise_title}}</div>
              <div
                class="rem-20px c-66 flex-one text-cut-one"
              >{{item.created_at != null ? item.created_at.slice(0,10): ""}}</div>
            </div>
          </div>
        </div>
      </div>
      <load
        @loadData="getArticle"
        :list="article"
        :total="total"
        :nodata="article.length<10?true:false"
      ></load>
    </div>

    <!-- 底部 -->
    <div
      class="footer bg-ff flex justify-between text-center"
      :style="[{'z-index': downShow?'999':'9'}]"
    >
      <div class="flex flex-grow justify-around align-center text-content rem-24px">
        <div class="c-ff0" @click="$router.push('/')">
          <i class="iconfont icon-shouye1-copy"></i>
          <div>首页</div>
        </div>
        <div class="c-99" @click="downShow=true" v-if="through.length > 0">
          <i class="iconfont icon-diqiu"></i>
          <div>直通</div>
        </div>
        <div class="c-99" @click="getCollect">
          <i :class="['iconfont', collect ? 'icon-shoucang c-ff0':'icon-shoucang1']"></i>
          <div>收藏</div>
        </div>
        <div class="c-99">
          <i class="iconfont icon-lianxi"></i>
          <div>
            <!-- <a v-if="customer_phone" :href="'tel:' + data.enterprise_phone">联系</a> -->
            <a @click="customerShow = true">联系</a>
          </div>
        </div>
      </div>
      <div class="bg-ff0 text-ff btn" @click="apply">申请</div>
    </div>

    <!-- 客服电话浮层customerShow -->
    <van-overlay :show="customerShow" z-index="999" @click="customerShow = false">
      <div class="wrapper">
        <div class="radius-15 position-center bg-ff rem-32px padding-b20" @click.stop>
          <div class="up_li bg-ff text-center text-bold border-bottom">业务咨询电话</div>
          <!-- <div class="bg-ff text-center c-99 rem-24px line-20 text-content">(请点击拨打)</div> -->
          <div>
            <div v-for="(item, index) in customer" :key="index" class="up_li h-80">
              <a :href="'tel:' + item.user_phone">{{item.user_name}}： {{item.user_phone}}</a>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>

    <!-- 申请浮层 -->
    <div class="up_bg" v-if="upShow">
      <div class="radius-15 position-center bg-ff rem-32px padding-b20">
        <div class="up_title text-center text-bold border-bottom">
          申请成为代理
          <p>（以下初始信息字段来自于您的名片信息，可根据实际情况进行修改）</p>
        </div>
        <div class="up_li flex justify-between border-bottom align-center">
          <div>姓名</div>
          <div>
            <input type="text" v-model="xm" placeholder="姓名" />
          </div>
        </div>
        <div class="up_li flex justify-between border-bottom align-center">
          <div class="word-all">手机号</div>
          <div>
            <input type="text" v-model="sj" placeholder="手机号" />
          </div>
        </div>
        <div class="up_li flex justify-between border-bottom align-center">
          <div>公司</div>
          <div>
            <input type="text" v-model="gs" placeholder="公司" />
          </div>
        </div>
        <div class="up_li flex justify-between border-bottom align-center">
          <div>地址</div>
          <div>
            <input type="text" v-model="apply_address" placeholder="地址" />
          </div>
        </div>
        <div class="padding-b20">
          <div class="up_li_s">备注</div>
          <div class="padding-lr20 margin-b20">
            <textarea class="radius-15" name id cols="30" rows="10" v-model="content"></textarea>
          </div>
        </div>
        <div
          class="login padding-lr20 margin-t20 text-ff rem-34px flex justify-between text-center"
        >
          <div class="bg-ff0" @click="setAgent">确定申请</div>
          <div class="bg-bcb" @click="upShow = false">取消申请</div>
        </div>
      </div>
    </div>

    <!--  -->
    <div class="up_bg" v-if="downShow && through.length > 0">
      <div class="down_off" @click="downShow=false"></div>
      <div class="down_ul radius-15 bg-ff flex flex-wrap text-center text-content">
        <div class="down_li" v-for="(item,index) in through" :key="index" @click="go(item.url)">
          <img :src="item.icon?item.icon:$nodata" alt />
          <div class="c-66 rem-24px">{{item.c_name}}</div>
        </div>
      </div>
    </div>

    
  </div>
</template>


<script>
import { getNewDetail, getNewArticle } from "../../plugins/api.js";
import load from "../../components/load";
import cardVue from "../card.vue";
const jsApiList = ["onMenuShareAppMessage", "onMenuShareTimeline"];
let wx = {};
if (process.client) {
  wx = require("weixin-js-sdk");
}
// import wx from "weixin-js-sdk";
export default {
  async asyncData({ req, params, route }) {
    let article_id = route.query.id;

    let [newDetailData] = await Promise.all([getNewDetail(article_id)]);

    let enterprise_id = newDetailData.data.enterprise_id;
    let newArticleData = await getNewArticle(enterprise_id, article_id);

    return {
      data: newDetailData.data,
      customer: newDetailData.customer_phone,
      enterprise_id: newDetailData.data.enterprise_id,
      seo_keyword: newDetailData.data.seo_keyword,
      seo_describe: newDetailData.data.seo_describe,
      seo_title: newDetailData.data.seo_title
        ? newDetailData.data.seo_title
        : "链配网 - 链接汽配产业优质资源",
      articles: newArticleData.data
    };
  },
  components: {
    load
  },
  head() {
    return {
      title: this.seo_title,
      meta: [
        { hid: "Keywords", name: "Keywords", content: this.seo_keyword },
        {
          hid: "description",
          name: "description",
          content: this.seo_describe ? this.seo_describe : this.seo_keyword
        }
      ]
    };
  },
  data() {
    return {
      articles: "",
      upShow: false,
      downShow: false,
      navType: false,
      data: {},
      total: 0,
      article: [],
      content: "",
      article_id: this.$route.query.id,
      enterprise_id: "",
      collect: false, // 收藏状态
      xm: "",
      sj: "",
      gs: "",
      through: [], // 直通车
      customerShow: false,
      customer: "", // 客服电话
      seo_keyword: "",
      seo_describe: "",
      seo_title: "",
      apply_address: ""
    };
  },
  mounted() {
    this.getDetail();
    document.addEventListener("scroll", this.down, false);
  },
  beforeDestroy() {
    document.removeEventListener("scroll", this.down, false);
  },
  methods: {
    getUrl(name) {
      let that = this;
      let url = window.location.href;
      this.$axios
        .post("/common/util/sign", {
          url: url
        })
        .then(res => {
          let timestamp = res.data.data.timestamp;
          let nonceStr = res.data.data.noncestr;
          let signature = res.data.data.sign;

          wx.config({
            debug: false,
            appId: "wxc776bb6f53038a01",
            timestamp: timestamp,
            nonceStr: nonceStr,
            signature: signature,
            jsApiList: jsApiList
          });

          wx.ready(function() {
            wx.onMenuShareTimeline({
              title: name, // 分享标题
              link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: that.data.thumb, // 分享图标
              success() {
                // that.$toast("分享朋友圈成功");
                // 用户确认分享后执行的回调函数
              },
              cancel() {
                // 用户取消分享后执行的回调函数
              }
            });
            wx.onMenuShareAppMessage({
              title: name, // 分享标题
              desc: that.data.abstract, // 分享描述
              link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
              imgUrl: that.data.thumb, // 分享图标
              success: function() {
                that.$toast("分享给朋友成功");
                // 用户确认分享后执行的回调函数
              },
              cancel: function() {
                // 用户取消分享后执行的回调函数
              }
            });
          });
        });
    },
    setAgent() {
      if (
        !this.xm ||
        !this.sj ||
        !this.gs ||
        !this.content ||
        !this.apply_address
      ) {
        this.$toast("请输入完整信息");
        return false;
      }
      this.$axios
        .post("/wap/handle/agent", {
          token: window.localStorage.getItem("token"),
          type: 2,
          enterprise_id: this.enterprise_id,
          apply_name: this.xm,
          apply_phone: this.sj,
          apply_company: this.gs,
          content: this.content,
          article_id: this.article_id,
          apply_address: this.apply_address
        })
        .then(res => {
          this.$toast(res.data.msg);
          if (res.data.code == 0) {
            this.upShow = false;
          }
        });
    },
    getDetail() {
      this.$axios
        .post("/wap/article/detail", {
          token: window.localStorage.getItem("token")
            ? window.localStorage.getItem("token")
            : "",
          article_id: this.article_id
        })
        .then(res => {
          // this.data = res.data.data;
          // this.customer = res.data.customer_phone;
          // if (!this.customer) {
          //   this.getCustomer();
          // }
          this.getUrl(this.data.article_title);
          for (let b in res.data.data.through) {
            if (res.data.data.through[b].url) {
              this.$set(this.through, b, res.data.data.through[b]);
            }
          }
          // this.enterprise_id = res.data.data.enterprise_id; // 企业id
          this.getArticle(1);
          if (res.data.data.is_collect == 1) {
            this.collect = true;
          }
        });
    },
    apply() {
      if (!window.localStorage.getItem("token")) {
        // 登录成功后跳转地址
        localStorage.setItem('returnPath', window.location.href)
        
        this.$toast("请退出企业后台后 登录个人账户进行操作");
        this.$router.push({
          path: "/recruit/login",
          query: {
            type: "card"
          }
        });
        return false;
      }
      this.upShow = true;
      this.$axios
        .post("/wap/personal/card", {
          token: window.localStorage.getItem("token"),
          type: 1
        })
        .then(res => {
          this.xm = res.data.data.user.user_name;
          this.sj = res.data.data.user.user_phone;
          this.gs = res.data.data.user.company_name;
          this.apply_address = res.data.data.user.address;
        });
    },
    // 上滑导航样式
    down() {
      let scrollTop =
        document.documentElement.scrollTop ||
        window.pageYOffset ||
        document.body.scrollTop; // 滚动的距离
      if (scrollTop > this.$refs.title.offsetTop) {
        this.navType = true;
      } else {
        this.navType = false;
      }
    },
    // 点赞
    setStar() {
      if (!window.localStorage.getItem("token")) {
        // 登录成功后跳转地址
        localStorage.setItem('returnPath', window.location.href)
        
        this.$toast("请退出企业后台后 登录个人账户进行操作");
        this.$router.push({
          path: "/recruit/login",
          query: {
            type: "card"
          }
        });
        return false;
      }
      this.$axios
        .post("/wap/article/star", {
          token: window.localStorage.getItem("token"),
          article_id: this.article_id
        })
        .then(res => {
          this.$toast(res.data.msg);
          if (res.data.msg == "取消点赞") {
            this.data.is_star = 0;
            this.data.support_num = this.data.support_num - 1;
          } else {
            this.data.is_star = 1;
            this.data.support_num = this.data.support_num + 1;
          }
        });
    },
    // 收藏
    getCollect() {
      if (!window.localStorage.getItem("token")) {
        // 登录成功后跳转地址
        localStorage.setItem('returnPath', window.location.href)
        
        this.$toast("请退出企业后台后 登录个人账户进行操作");
        this.$router.push({
          path: "/recruit/login",
          query: {
            type: "card"
          }
        });
        return false;
      }
      this.$axios
        .post("/wap/enterprise/collect", {
          token: window.localStorage.getItem("token"),
          enterprise_id: this.enterprise_id
        })
        .then(res => {
          this.$toast(res.data.msg);
          if (res.data.msg == "收藏成功") {
            this.collect = true;
          } else {
            this.collect = false;
          }
        });
    },
    // 相关新闻
    getArticle(page) {
      this.$axios
        .post("/wap/info/article", {
          enterprise_id: this.enterprise_id,
          article_id: this.article_id,
          page: page,
          limit: 10
        })
        .then(res => {
          if (page == 1) {
            this.list = [];
            this.topList = [];
          }
          if (res.data.data.length == 0) {
            this.total++;
            return false;
          }
          for (let i in res.data.data) {
            this.article.push(res.data.data[i]);
          }
        });
    },
    // 携带参数跳转
    to(path, id) {
      if (path == "/recruit/news") {
        window.location.search = "?id=" + id;
        return false;
      }
      this.$router.push({
        path: path,
        query: {
          id: id
        }
      });
    },
    // 拨打客服电话
    getCustomer() {
      this.$axios.post("/wap/config/customer", {}).then(res => {
        this.customer = res.data.data;
      });
    }
  }
};
</script>


<style >
.news_cont * {
  max-width: 100% !important;
}
</style>


<style scoped>
.news .border .red {
  color: red;
}
/* 上滑标题 */
.downnav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2003;
}
.news .van-icon {
  color: #666;
  font-size: 0.4rem;
}
/*  */
.cover_img {
  width: 1.14rem;
  min-width: 1.14rem;
  height: 0.88rem;
  display: block;
  object-fit: contain;
}
.news_cont * {
  max-width: 100%;
  white-space: normal;
}
.news_cont img {
  padding-bottom: 0.2rem;
}
.border {
  display: flex;
  align-items: center;
  border: 0.01rem solid #e3e3e3;
  border-radius: 0.3rem;
  padding: 0 0.24rem;
  height: 0.6rem;
  font-size: 0.24rem;
  color: #333;
  vertical-align: middle;
}
.border .iconfont {
  font-size: 0.26rem;
  color: #999;
  margin-right: 0.12rem;
}
/* 最新资讯 */
.news_li {
  border-bottom: 0.01rem solid #e9e9e9;
}

.news_li:last-of-type {
  border: 0;
}

.news_li img {
  min-width: 2.27rem;
  max-width: 2.27rem;
  height: 1.72rem;
  object-fit: contain;
}

.news_li_s {
  margin-top: 0.1rem;
  height: 0.42rem;
  line-height: 0.42rem;
}

.news_li_tip {
  padding: 0 0.12rem;
  background: #f2f2f2;
  border-radius: 0.05rem;
}
/* 申请记录浮层 */
.down_off {
  position: absolute;
  z-index: 98;
  width: 100%;
  height: 100%;
}
.down_ul {
  width: 6.98rem;
  position: absolute;
  z-index: 99;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 0.5rem;
}
.down_li {
  width: 25%;
  padding-bottom: 0.5rem;
}
.down_li img {
  width: 0.8rem;
  height: 0.8rem;
  display: inline-block;
}
/* 申请代理浮层 */
.up_bg {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.up_li {
  padding: 0 0.2rem;
  height: 1rem;
  line-height: 1rem;
}
.up_li div:first-of-type {
  width: 1.5rem;
  min-width: 1.5rem;
}
.up_title {
  padding: 0.1rem 0.2rem;
  line-height: 1.6;
}
.up_title p {
  font-size: 0.2rem;
  font-weight: initial;
}

.up_li div:last-of-type {
  flex-grow: 1;
}
.up_li input {
  width: 100%;
  height: 100%;
  text-align: right;
}
.up_bg textarea {
  width: 5.8rem;
  height: 2rem;
  outline: none;
  resize: none;
  border: 0.01rem solid #d1d1d1;
}
.up_li_s {
  padding: 0 0.2rem;
  height: 0.8rem;
  line-height: 0.8rem;
}
.login {
  height: 0.9rem;
  line-height: 0.9rem;
}
.login > div {
  width: 2.8rem;
  border-radius: 0.15rem;
}
/* 底部 */
.footer {
  position: fixed;
  z-index: 9;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.88rem;
}
.footer .iconfont {
  font-size: 0.3rem;
}

.footer .btn {
  width: 2rem;
  line-height: 0.88rem;
}
.hot_title {
  background: white;
  font-size: 0.32rem;
  height: 1rem;
  line-height: 1rem;
}

textarea {
  padding: 0.3rem;
}

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .footer {
    padding-bottom: 0.68rem !important;
    box-sizing: content-box;
  }
  .news {
    margin-bottom: 2rem;
  }
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.van-overlay .position-center {
  overflow: hidden;
  width: 80%;
  text-align: center;
}

.news .h-80 {
  height: 0.8rem;
}
</style>


<style>
.news_cont p {
  margin-bottom: 14px;
}
</style>